"use client"

import { useState } from "react"
import {
  Card,
  Tabs,
  Form,
  Input,
  Button,
  Switch,
  Divider,
  Select,
  Upload,
  message,
  Typography,
  Row,
  Col,
} from "antd"
import {
  UserOutlined,
  LockOutlined,
  MailOutlined,
  BellOutlined,
  UploadOutlined,
  GlobalOutlined,
  SecurityScanOutlined,
  SaveOutlined,
} from "@ant-design/icons"

const { Title } = Typography
const { Option } = Select
const { TabPane } = Tabs

const Settings = () => {
  const [loading, setLoading] = useState(false)

  const handleSaveBasicSettings = (values) => {
    setLoading(true)

    // 模拟API调用
    setTimeout(() => {
      console.log("保存基本设置:", values)
      message.success("设置保存成功")
      setLoading(false)
    }, 1000)
  }

  const handleSaveSecuritySettings = (values) => {
    setLoading(true)

    // 模拟API调用
    setTimeout(() => {
      console.log("保存安全设置:", values)
      message.success("安全设置保存成功")
      setLoading(false)
    }, 1000)
  }

  const handleSaveNotificationSettings = (values) => {
    setLoading(true)

    // 模拟API调用
    setTimeout(() => {
      console.log("保存通知设置:", values)
      message.success("通知设置保存成功")
      setLoading(false)
    }, 1000)
  }

  return (
    <div className="settings">
      <div className="page-header">
        <Title level={4} className="page-title">
          系统设置
        </Title>
      </div>

      <Card>
        <Tabs defaultActiveKey="1">
          <TabPane
            tab={
              <span>
                <UserOutlined />
                基本设置
              </span>
            }
            key="1"
          >
            <Form
              layout="vertical"
              onFinish={handleSaveBasicSettings}
              initialValues={{
                companyName: "美好婚礼策划有限公司",
                adminEmail: "admin@example.com",
                phone: "13800138000",
                address: "北京市朝阳区建国路88号",
                website: "https://www.example.com",
                language: "zh_CN",
                timezone: "Asia/Shanghai",
              }}
            >
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item
                    name="companyName"
                    label="公司名称"
                    rules={[{ required: true, message: "请输入公司名称" }]}
                  >
                    <Input placeholder="请输入公司名称" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="adminEmail"
                    label="管理员邮箱"
                    rules={[
                      { required: true, message: "请输入管理员邮箱" },
                      { type: "email", message: "请输入有效的邮箱地址" },
                    ]}
                  >
                    <Input
                      prefix={<MailOutlined />}
                      placeholder="请输入管理员邮箱"
                    />
                  </Form.Item>
                </Col>
              </Row>

              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item
                    name="phone"
                    label="联系电话"
                    rules={[
                      { required: true, message: "请输入联系电话" },
                      {
                        pattern: /^1[3-9]\d{9}$/,
                        message: "请输入有效的手机号码",
                      },
                    ]}
                  >
                    <Input placeholder="请输入联系电话" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="address"
                    label="公司地址"
                    rules={[{ required: true, message: "请输入公司地址" }]}
                  >
                    <Input placeholder="请输入公司地址" />
                  </Form.Item>
                </Col>
              </Row>

              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item name="website" label="公司网站">
                    <Input
                      prefix={<GlobalOutlined />}
                      placeholder="请输入公司网站"
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="logo" label="公司Logo">
                    <Upload
                      name="logo"
                      action="/api/upload"
                      listType="picture"
                      maxCount={1}
                      beforeUpload={(file) => {
                        const isJpgOrPng =
                          file.type === "image/jpeg" ||
                          file.type === "image/png"
                        if (!isJpgOrPng) {
                          message.error("只能上传JPG/PNG格式的图片!")
                        }
                        const isLt2M = file.size / 1024 / 1024 < 2
                        if (!isLt2M) {
                          message.error("图片大小不能超过2MB!")
                        }
                        return isJpgOrPng && isLt2M
                      }}
                    >
                      <Button icon={<UploadOutlined />}>上传Logo</Button>
                    </Upload>
                  </Form.Item>
                </Col>
              </Row>

              <Divider orientation="left">区域设置</Divider>

              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item
                    name="language"
                    label="系统语言"
                    rules={[{ required: true, message: "请选择系统语言" }]}
                  >
                    <Select placeholder="请选择系统语言">
                      <Option value="zh_CN">简体中文</Option>
                      <Option value="en_US">English (US)</Option>
                      <Option value="ja_JP">日本語</Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="timezone"
                    label="时区"
                    rules={[{ required: true, message: "请选择时区" }]}
                  >
                    <Select placeholder="请选择时区">
                      <Option value="Asia/Shanghai">
                        Asia/Shanghai (UTC+8)
                      </Option>
                      <Option value="America/New_York">
                        America/New_York (UTC-5)
                      </Option>
                      <Option value="Europe/London">
                        Europe/London (UTC+0)
                      </Option>
                      <Option value="Asia/Tokyo">Asia/Tokyo (UTC+9)</Option>
                    </Select>
                  </Form.Item>
                </Col>
              </Row>

              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  loading={loading}
                  icon={<SaveOutlined />}
                >
                  保存设置
                </Button>
              </Form.Item>
            </Form>
          </TabPane>

          <TabPane
            tab={
              <span>
                <SecurityScanOutlined />
                安全设置
              </span>
            }
            key="2"
          >
            <Form
              layout="vertical"
              onFinish={handleSaveSecuritySettings}
              initialValues={{
                twoFactorAuth: false,
                passwordExpiration: "90",
                loginAttempts: "5",
                sessionTimeout: "120",
                passwordStrength: "medium",
              }}
            >
              <Form.Item
                name="currentPassword"
                label="当前密码"
                rules={[{ required: true, message: "请输入当前密码" }]}
              >
                <Input.Password
                  prefix={<LockOutlined />}
                  placeholder="请输入当前密码"
                />
              </Form.Item>

              <Form.Item
                name="newPassword"
                label="新密码"
                rules={[{ required: true, message: "请输入新密码" }]}
              >
                <Input.Password
                  prefix={<LockOutlined />}
                  placeholder="请输入新密码"
                />
              </Form.Item>

              <Form.Item
                name="confirmPassword"
                label="确认新密码"
                rules={[
                  { required: true, message: "请确认新密码" },
                  ({ getFieldValue }) => ({
                    validator(_, value) {
                      if (!value || getFieldValue("newPassword") === value) {
                        return Promise.resolve()
                      }
                      return Promise.reject(new Error("两次输入的密码不一致"))
                    },
                  }),
                ]}
              >
                <Input.Password
                  prefix={<LockOutlined />}
                  placeholder="请确认新密码"
                />
              </Form.Item>

              <Divider orientation="left">安全策略</Divider>

              <Form.Item
                name="twoFactorAuth"
                label="双因素认证"
                valuePropName="checked"
              >
                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
              </Form.Item>

              <Form.Item
                name="passwordStrength"
                label="密码强度要求"
                rules={[{ required: true, message: "请选择密码强度要求" }]}
              >
                <Select placeholder="请选择密码强度要求">
                  <Option value="low">低 (至少6个字符)</Option>
                  <Option value="medium">
                    中 (至少8个字符，包含数字和字母)
                  </Option>
                  <Option value="high">
                    高 (至少10个字符，包含数字、大小写字母和特殊字符)
                  </Option>
                </Select>
              </Form.Item>

              <Form.Item
                name="passwordExpiration"
                label="密码有效期(天)"
                rules={[{ required: true, message: "请输入密码有效期" }]}
              >
                <Select placeholder="请选择密码有效期">
                  <Option value="30">30天</Option>
                  <Option value="60">60天</Option>
                  <Option value="90">90天</Option>
                  <Option value="180">180天</Option>
                  <Option value="never">永不过期</Option>
                </Select>
              </Form.Item>

              <Form.Item
                name="loginAttempts"
                label="登录失败尝试次数"
                rules={[{ required: true, message: "请选择登录失败尝试次数" }]}
              >
                <Select placeholder="请选择登录失败尝试次数">
                  <Option value="3">3次</Option>
                  <Option value="5">5次</Option>
                  <Option value="10">10次</Option>
                </Select>
              </Form.Item>

              <Form.Item
                name="sessionTimeout"
                label="会话超时时间(分钟)"
                rules={[{ required: true, message: "请选择会话超时时间" }]}
              >
                <Select placeholder="请选择会话超时时间">
                  <Option value="30">30分钟</Option>
                  <Option value="60">60分钟</Option>
                  <Option value="120">120分钟</Option>
                  <Option value="240">240分钟</Option>
                </Select>
              </Form.Item>

              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  loading={loading}
                  icon={<SaveOutlined />}
                >
                  保存设置
                </Button>
              </Form.Item>
            </Form>
          </TabPane>

          <TabPane
            tab={
              <span>
                <BellOutlined />
                通知设置
              </span>
            }
            key="3"
          >
            <Form
              layout="vertical"
              onFinish={handleSaveNotificationSettings}
              initialValues={{
                emailNotification: true,
                smsNotification: false,
                systemNotification: true,
                newCustomerNotification: true,
                eventReminderNotification: true,
                paymentNotification: true,
                systemUpdateNotification: true,
              }}
            >
              <Divider orientation="left">通知渠道</Divider>
              <Form.Item
                name="emailNotification"
                label="电子邮件通知"
                valuePropName="checked"
              >
                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
              </Form.Item>

              <Form.Item
                name="smsNotification"
                label="短信通知"
                valuePropName="checked"
              >
                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
              </Form.Item>

              <Form.Item
                name="systemNotification"
                label="系统内通知"
                valuePropName="checked"
              >
                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
              </Form.Item>

              <Divider orientation="left">通知类型</Divider>

              <Form.Item
                name="newCustomerNotification"
                label="新客户通知"
                valuePropName="checked"
              >
                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
              </Form.Item>

              <Form.Item
                name="eventReminderNotification"
                label="婚礼活动提醒"
                valuePropName="checked"
              >
                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
              </Form.Item>

              <Form.Item
                name="paymentNotification"
                label="付款通知"
                valuePropName="checked"
              >
                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
              </Form.Item>

              <Form.Item
                name="systemUpdateNotification"
                label="系统更新通知"
                valuePropName="checked"
              >
                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
              </Form.Item>

              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  loading={loading}
                  icon={<SaveOutlined />}
                >
                  保存设置
                </Button>
              </Form.Item>
            </Form>
          </TabPane>
        </Tabs>
      </Card>
    </div>
  )
}

export default Settings
